<script setup lang="ts">
import { useMemberStore } from '@/stores'
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const memberStore = useMemberStore()
const openid = computed(() => memberStore.profile?.openid ?? null)
const avatarUrl = ref(
  memberStore.profile?.avatarUrl ??
    'https://youzhen123.oss-cn-huhehaote.aliyuncs.com/WechatOwnerProperty/images/mrtx.png',
)
const userName = ref(memberStore.profile?.nickName)
const openAppAuthorizeSetting = async () => {
  try {
    // 获取当前权限状态
    const settingResult = await uni.getSetting({
      withSubscriptions: true, // 获取订阅消息权限
    })

    // 打开权限设置页
    const result = await uni.openSetting()

    // 处理设置结果
    if (result.authSetting) {
      uni.showToast({
        title: '权限设置已更新',
        icon: 'success',
      })
    }
  } catch (err) {
    uni.showToast({
      title: '打开设置页失败',
      icon: 'error',
    })
  }
}
onLoad(() => {
  avatarUrl.value =
    memberStore.profile?.avatarUrl ??
    'https://youzhen123.oss-cn-huhehaote.aliyuncs.com/WechatOwnerProperty/images/mrtx.png'
  userName.value = memberStore.profile?.nickName
})
</script>

<template>
  <view class="my">
    <view class="myInfo">
      <view class="avatar">
        <image :src="avatarUrl"></image>
      </view>
      <view class="name">
        <navigator url="/pages/information/information" v-if="openid">{{ userName }}</navigator>
        <navigator url="/pages/login/login" v-else>
          <view class="login-text"> 点击登录</view>
        </navigator>
      </view>
    </view>
    <view class="section">
      <view class="list">
        <!--        <navigator class="row" url="/pages/information/information">-->
        <!--          <view class="left">-->
        <!--            <view class="text"> 个人信息</view>-->
        <!--          </view>-->
        <!--          <uni-icons class="right-icon" type="right" size="10"></uni-icons>-->
        <!--        </navigator>-->

        <navigator class="row" url="/pages/recommend/recommend">
          <view class="left">
            <view class="text"> 反馈建议</view>
          </view>
          <uni-icons class="right-icon" type="right" size="10"></uni-icons>
        </navigator>

        <navigator class="row" url="/pages/contact/contact">
          <view class="left">
            <view class="text"> 联系我们</view>
          </view>
          <uni-icons class="right-icon" type="right" size="10"></uni-icons>
        </navigator>
        <view class="row" @tap="openAppAuthorizeSetting">
          <view class="left">
            <view class="text">权限管理</view>
          </view>
          <uni-icons class="right-icon" type="right" size="10"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.my {
  .myInfo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 50rpx 0;

    .avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .name {
      font-size: 36rpx; /* 调整登录链接字体为14rpx */
      padding: 20rpx 0 5rpx;
    }
  }

  //.login-text {
  //
  //}

  .section {
    width: 690rpx;
    margin: 50rpx auto;
    border: none;
    border-radius: 20rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-color: #f9f9f9;

    .list {
      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30rpx;
        height: 100rpx;
        background-color: #fff;
        border-bottom: 1px solid #eee;

        .left {
          display: flex;
          align-items: center;
        }

        .text {
          font-size: 30rpx; /* 调整列表项文字为18rpx */
          color: #333;
        }

        .right-icon {
          margin-left: 10rpx;
        }

        .row .hover {
          background-color: #ebebeb;
        }

        .row .last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>
